 <template>
  <a-spin :spinning="spinning">
    <a-card title="基础信息">
      <a-form :form="form">
        <a-row>
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="服务ID"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-input disabled v-decorator="['serviceId']" />
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16" :xxl="16">
            <a-form-item
              label="服务名"
              :label-col="{
                md: { span: 4 },
                xs: { span: 24 },
                sm: { span: 12 },
              }"
              :wrapper-col="{
                md: { span: 20 },
                xs: { span: 24 },
                sm: { span: 12 },
              }"
            >
              <a-input disabled v-decorator="['serverHost']" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="服务器环境"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-input disabled v-decorator="['serviceEnvironmental']" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16" :xxl="16">
            <a-form-item
              label="服务IP"
              :label-col="{
                md: { span: 4 },
                xs: { span: 24 },
                sm: { span: 12 },
              }"
              :wrapper-col="{
                md: { span: 20 },
                xs: { span: 24 },
                sm: { span: 12 },
              }"
            >
              <a-input disabled v-decorator="['serviceIp']" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="请求地址"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-input disabled v-decorator="['requestUrl']" />
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="请求方式"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-input disabled v-decorator="['method']" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="用户IP"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-input disabled v-decorator="['remoteIp']" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16" :xxl="16">
            <a-form-item
              label="用户代理"
              :label-col="{
                md: { span: 4 },
                xs: { span: 24 },
                sm: { span: 12 },
              }"
              :wrapper-col="{
                md: { span: 20 },
                xs: { span: 24 },
                sm: { span: 12 },
              }"
            >
              <a-input disabled v-decorator="['userAgent']" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="类名"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-input disabled v-decorator="['className']" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="方法名"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-input disabled v-decorator="['methodName']" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="请求参数"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-input disabled v-decorator="['requestParams']" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="请求时间"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-input disabled v-decorator="['requestTime']" />
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="创建人"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-input disabled v-decorator="['createUser']" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="创建时间"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-input disabled v-decorator="['createTime']" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <footer-tool-bar>
        <a-button icon="rollback" @click="handleRefresh">返回</a-button>
      </footer-tool-bar>
    </a-card>
  </a-spin>
</template>

<script>
import FooterToolBar from "@/components/footerToolbar";
import { getActionLog } from "@/api/sys/syslog/actionLog";
export default {
  components: {
    FooterToolBar,
  },
  props: {
    modifyEntity: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      // 显示描述宽度
      labelCol: { md: { span: 8 }, xs: { span: 24 }, sm: { span: 12 } },
      // 输入框宽度
      wrapperCol: { md: { span: 16 }, xs: { span: 24 }, sm: { span: 12 } },
      // 遮罩层加载
      spinning: false,
      form: this.$form.createForm(this),
      entity: {},
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.form.resetFields(); // 重置参数值
      //详情获取详细信息
      let that = this;
      this.spinning = true;
      getActionLog(this.modifyEntity.id )
        .then((res) => {
          that.entity = res.data;
          var setData = {};
          Object.keys(that.form.getFieldsValue()).forEach((item) => {
            setData[item] = that.entity[item];
          });
          that.form.setFieldsValue(setData);
          that.spinning = false;
        })
        .catch((error) => {
          that.spinning = false;
        });
    },
    // 取消、关闭
    handleRefresh() {
      this.spinning = false;
      this.$emit("handleRefresh");
    },
  },
};
</script>
